<template>
    <div>
        <el-card class="login-box">
            <h3>注册</h3>
            <el-form :rules="userFormRules" :model="userForm" ref="registerForm">
                <el-form-item prop="username">
                    <el-input  prefix-icon="el-icon-user-solid" v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input  prefix-icon="el-icon-s-goods" show-password v-model="userForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="loginbtn" @click="register()">注册</el-button>
                </el-form-item>
            </el-form>
            
             已经有账号，<router-link to="/login">请登录</router-link>
        </el-card>
    </div>
    <!-- 

        vue2操作DOM的步骤
        1、给要操作目标元素添加一个ref属性，然后属性中写上值
        ref="xx"
        2、直接在vue实例上$refs
     -->
</template>


<script>
export default {
    data(){
        return{
            userForm:{
                username:'',
                password:''
            },
            userFormRules:{
                username:[
                    {required:true,message:'用户名不能为空',trigger:'blur'},
                    {min:3,max:12,message:'用户名长度介于3-12位之间',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'密码不能为空',trigger:'blur'},
                    {min:3,max:12,message:'密码长度介于3-12位之间',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        register(){
            //在表单元素中有一个validate方法
            this.$refs.registerForm.validate(async args=>{
                if(args){
                    const {code,message}=await this.$api.users.register(this.userForm)
                    if(code){
                        this.$message.success(message)
                    }
                }
                
            })

        }
    }
}
</script>

<style lang="scss">
    .login-box{
        margin: 200px auto;
        width: 480px;
        .loginbtn{
            width: 450px;
        }
    }
</style>